<template>
    <div class="pre-order">
		<h1 class="confirm-title">确认订单</h1>
		<el-table :data="vipProduct"
			style="width: 100%">
			<el-table-column align="center"
				label="充值产品">
				<template v-slot="{ row }">
					<img style="vertical-align: middle"
						width="40%"
						:src="row.imageUrl"
						alt="" />
					&nbsp;
					<span style="color: #f4c14f; font-weight: bolder">{{ row.productName }}</span>
					<br />
					<span>{{ row.description }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center"
				prop="price"
				label="单价">
				<template v-slot="{ row }">
					<span class="price">
						{{ row.price }}
					</span>
				</template>
			</el-table-column>
			<el-table-column align="center"
				prop="address"
				label="数量">

				<template v-slot="{row}">
					<el-input-number v-model="quantity"
						size="mini"
						:min="1"
						:max="vipProduct[0].inventory"
						label="描述文字"></el-input-number>
                    <!-- //!解决elmtUI计数器问题d -->
					<i v-if="false">{{row}}</i>   
				</template>

			</el-table-column>
			<el-table-column align="center"
				prop="address"
				label="小计">

				<template >
					<span class="total_fee">{{totalPrice}}元</span>
				</template>

			</el-table-column>
		</el-table>
		<div class="total-fee">
			<div class="box-wrap">
				<div class="box-shadow">
					<span class="realpay--title"
						data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
					<span class="realpay--price-symbol">¥</span>
					<span class="realpay--price" style="color: rgb(255, 80, 0)">{{totalPrice}} 元</span>
					<div class="order-confirmAddr">
						<div class="confirmAddr-addr-user">
							<span class="confirmAddr-title">充值详情：</span>{{vipProduct[0]?.description}}<span class="confirmAddr-pro"></span>
						</div>
						<div class="confirmAddr-addr">
							<span class="confirmAddr-title">充值账户：</span>{{userInfo.username}}<span class="confirmAddr-usn"></span>
							&nbsp;
							<span class="confirmAddr-title">昵称：</span>{{userInfo.nickname}}<span class="confirmAddr-usn"></span>
						</div>
					</div>
				</div>
			</div>
			<div class="btn">
				<el-button 
					type="danger" @click='subOrder'>提交订单</el-button>
			</div>
		</div>
	</div>
</template>

<script>
    import storage from '@/utils/storage' 
	import * as api from '@/api/pay'
    export default {
		meta:{
            name:'预支付',
        },

        data() {
            return {
                vipProduct: [],
                quantity: 1,
                userInfo:{},
				product_id:''
            }
        },
        methods: {
            handleChange(value) {
                // console.log(value);
            },
            subOrder(){
				this.$confirm('您正在提交订单', '提示', {
					cancelButtonText: '取消',
					confirmButtonText: '确定',
					type: 'success'
				})
				.then(()=>{
					//// 调用下单接口
					api.order(this.product_id,this.quantity)
					.then(res=>{
						console.log(res);
						if(res.data.state){
							let { order_id } = res.data
							////跳转扫码支付页面
							this.$router.push({name:'home-payment-pay',query:{ order_id }} )
						}
					})

				})
				.catch(() => {
					this.$message({
					type: 'warning',
					message: '已取消订单'
					});          
				})
                
            }

        },
        mounted(){
            let product = storage.get('product')
            let userinfo = storage.get('userInfo')
        	this.vipProduct.push(product)
        	this.userInfo = userinfo
			this.product_id = product.product_id
        //    console.log(this.product_id);
        },
        computed:{
            totalPrice(){
                return (this.quantity * this.vipProduct[0]?.price).toFixed(2)
            }
        }

    }
  </script>

<style lang="less" scoped>
  .price {
	color: #ff0036;
	font-weight: bolder;
}
.total_fee {
	font-size: 16px;
	color: #ff0036;
}
.el-button {
	width: 180px;
	border-radius: 0;
}
.confirm-title {
    line-height: 0px;
	text-align: left;
	margin-bottom: 30px;
}
.pre-order {
	padding: 80px 100px 0 100px;
}
.total-fee {
	margin-top: 50px;
	text-align: right;
}
.box-wrap {
	display: inline-block;
	border: 1px solid #ff0036;
	.box-shadow {
		border: 3px solid #fff0e8;
		min-width: 300px;
		padding: 10px 5px 10px 20px;
		.realpay--title {
			font-weight: 700;
			color: #333;
		}
		.realpay--price-symbol {
			font-size: 26px;
			margin-right: 4px;
			color: #999;
		}
		.realpay--price {
			color: #ff0036;
			font: 700 26px tahoma;
		}
		.order-confirmAddr {
			line-height: 1.6;
			font-weight: bolder;
			margin-top: 10px;
			font-size: 16px;
			// text-align: center;
			// font-family: "PingFang SC";
			.confirmAddr-usn {
				color: #ff0036;
				font-size: 20px;
			}
			.confirmAddr-pro {
				color: goldenrod;
				font-size: 16px;
			}
		}
	}
}
.confirmAddr-title{
    color: red;
}
</style>